<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div class="category__container">

    <ol id="my-category">
      <li>
        <div class="category__title">一、开始</div>
      </li>
      <li class="active">
        <div class="category__title">二、执行</div>
      </li>
      <li>
        <div class="category__title">三、确认</div>
      </li>
      <li>
        <div class="category__title">四、反思</div>
      </li>
    </ol>
  </div>

  <style>
    :root {
      display: flex;
      justify-content: center;
      background-color: #f4f5f5;

      --cate-color: #1B86F9;
      --cate-left-color: #eaeaea;
      --cate-bg: white;
      --basic-size: 2px;

      --circle-size: calc(var(--basic-size) * 9);
      --right-size: calc(var(--basic-size) * 6);
      --line-height-size: calc(var(--basic-size) * 16);
      --padding-size: calc(var(--basic-size) * 32);
    }

    ol,
    ul,
    li {
      list-style: none;
      padding: 0;
      margin: 0;
      border: 0;
      box-sizing: border-box;
    }

    ol,
    ul {
      border-left: var(--basic-size) solid var(--cate-left-color);
    }

    li {
      display: flex;
      align-items: center;
      cursor: pointer;
      line-height: var(--line-height-size);
    }

    .active {
      color: var(--cate-color);
    }

    .active::before {
      background-color: var(--cate-color);
    }

    li::before {
      content: "";
      border: var(--basic-size) var(--cate-color) solid;
      background-color: var(--cate-bg);
      width: var(--circle-size);
      height: var(--circle-size);
      right: var(--right-size);
      border-radius: 50%;
      display: block;
      position: relative;
    }

    .category__container {
      background-color: #fff;
      padding: var(--padding-size);
    }

  </style>

  <script>
    const category = document.querySelector('#my-category');
    const titles = document.querySelectorAll(".category__title");
    const clickHandler = (e) => {
      [].forEach.call(titles, c => c.parentElement.classList.remove('active'));
      if (e.target.tagName === "LI") {
        e.target.classList.add('active');
      }
      if (e.target.classList.contains("category__title")) {
        e.target.parentElement.classList.add('active');
      }
    }
    category.addEventListener("click", clickHandler);

  </script>
</body>

</html>
